<template>
	<div class="my_project" v-if="myProjectList && myProjectList.length > 0">
		<div
			class="my_project_item"
			v-for="item in myProjectList"
			:key="item.projectTaskId"
		>
			<p class="title">{{ item.projectName }}</p>
			<p class="info">{{ item.projectSummary || "暂无摘要" }}</p>
			<p class="time">
				<el-icon class="m-r5"><Timer /></el-icon>{{ item.predictEndTime }}截止
			</p>
			<el-progress
				:percentage="
					+((item.completedTaskTotalNum / item.taskTotalNum) * 100).toFixed(
						2
					) || 0
				"
				:stroke-width="10"
			/>
			<p class="names">
				{{ item.users ? item.users.map((i) => i.userName).join(",") : "" }}
			</p>
		</div>
	</div>
</template>

<script setup>
import { Timer } from "@element-plus/icons-vue";
import { ElProgress, ElIcon } from "element-plus";

const props = defineProps({
	myProjectList: {
		type: Array,
		default: () => {
			return [];
		},
	},
});
</script>

<style lang="scss" scoped>
@import "./my_project.scss";
</style>
